<template>
    <div>
        <div class="col-md-12 write-something">
            <input class="form-control col-md-6" placeholder="主题(16字以内)" style="margin-bottom: 10px"
                   v-model="post.title"
            >
            <mavon-editor id="editor" style="z-index: 1;height: 500px"
                          class="form-control" placeholder="写点儿什么吧..."
                          @imgAdd="handleEditorImgAdd"
                          ref="md"
                          v-model="post.content"
                          :boxShadow = "false"
                          :toolbars="toolbarsValue"
                          :imageFilter = "uploadBefore"
                          :externalLink="false"
            ></mavon-editor>
        </div>
        <div class="col-md-12 w-100" style="display:flex;">
            <div class="w-50"><button class="btn btn-outline-secondary" @click="back()">
                <i class="fa fa-minus-square-o"></i>&nbsp;返回</button></div>
            <div class="w-50 text-right">
                <input type="checkbox" v-model="privacy">仅自己可见
                <button class="btn btn-primary" style="margin-left: 20px" v-on:click="commit()">
                    <i class="fa fa-file"></i>&nbsp;发表</button>
            </div>
        </div>
    </div>
</template>

<script>
    import File from "../../components/File";
    export default {
        name: "PostEdit",
        components: {File},
        data() {
            return {
                loginUser: {},
                post: {},
                FILE_USE: FILE_USE,
                toolbarsValue: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: false, // 上角标
                    subscript: false, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: false, // 左对齐
                    aligncenter: false, // 居中
                    alignright: false, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
                privacy: false
            }
        },
        mounted() {
            let _this = this;
            _this.loginUser = Tool.getLoginUser();
            let postId = _this.$route.params.id;
            if (postId) {
                _this.getPostById(postId);
            }
        },
        methods: {
            uploadBefore(f){
                if(f.size>2016324){
                    Toast.warning('图片限制大小为2M');
                    return false
                }else {
                    return true
                }
            },
            handleEditorImgAdd(pos, file){
                let _this = this;
                let formData = new window.FormData();
                formData.append('file',file);
                formData.append('use',_this.FILE_USE.IMAGE.key);
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/file/file/oss-simple',formData).then(response=>{
                    let resp = response.data;
                    console.log("上传文件成功：",resp);
                    let path = resp.content.path;
                    _this.$refs.md.$img2Url(pos, path);
                })
            },
            back() {
                this.$router.go(-1);
            },
            getPostById(postId) {
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/post/detail/' + postId).then(response=>{
                    let resp = response.data;
                    if(resp.success) {
                        _this.post = resp.content;
                        console.log(_this.post.privacy);
                        _this.privacy = _this.post.privacy == PRIVACY.PRIVACY.key;
                        console.log(_this.post.privacy);
                    }
                })
            },
            /**
             * 发表文章
             */
            commit() {
                let _this = this;
                _this.post.userId = _this.loginUser.id;
                _this.post.privacy = _this.privacy ? PRIVACY.PRIVACY.key : PRIVACY.PUBLIC.key;
                if(1 != 1
                    || !Validator.require(_this.post.title, "标题")
                    || !Validator.length(_this.post.title, "标题", 1, 16)
                ) {
                    return;
                }
                _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/post/save',_this.post).then((response) => {
                    let resp = response.data;
                    if(resp.success) {
                        _this.$router.push("/post")
                        Toast.success("发表成功");
                    }else{
                        Toast.warning(resp.message);
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>